<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<title>烟草客户信息管理 - 云超市</title>

<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */
    {
        opacity: 0
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .2s ease;
    }

    .slide-fade-leave-active {
        transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(200px);
        opacity: 0;
    }

    .sendMsgBtn {
        width: 230px;
    }
</style>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet"
      href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>
<link rel="stylesheet" href="${contextPath}/static/system/css/sqlorder_style.css"/>
<div id="app">
    <transition name="slide-fade">
        <div class="row home" v-show="home">
            <form class="form-inline" style="text-align: right;margin-bottom: 10px;">
                <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
                    <div class="form-group">
                        <input class="form-control input-sm" type="text" id="quXianNameInput"
                               placeholder="区县名称">
                    </div>
                </shiro:hasPermission>
                <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
                    <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                        <div class="form-group">
                            <input class="form-control input-sm" type="text" id="quDaoNameInput"
                                   placeholder="渠道名称">
                        </div>
                    </shiro:lacksPermission>
                    <div class="form-group">
                        <input class="form-control input-sm" type="text" id="KeHuJingLiNameInput"
                               placeholder="客户经理名称">
                    </div>
                </shiro:lacksPermission>
                <div class="form-group">
                    <input class="form-control input-sm" type="text" id="channelNameInput"
                           placeholder="客户名称">
                </div>
                <div class="form-group">
                    <input class="form-control input-sm" type="text" id="slsmanNameInput"
                           placeholder="专卖证号">
                </div>
                <div class="form-group">
                    <input id="cityTypeInput" class="form-control input-sm" type="text" placeholder="经营类型">
                </div>
                <div class="form-group">
                    <select id="timeTypeInput" class="form-control" style="height: 31px;">
                        <option value="CC.FIRST_BIND_CAR_TIME">绑卡</option>
                        <option value="CC.FIRST_PAY_ORDER_TIME">支付</option>
                        <option value="CC.FIRST_LOGIN_TIME">注册</option>
                    </select>
                    <input class="form-control input-sm" type="text" id="firstBindCarTimeInput"
                           placeholder="开始时间">
                    <input class="form-control input-sm" type="text" id="firstPayOrderTimeInput"
                           placeholder="结束时间">
                </div>

                <div class="form-group">
                    <select id="isBankCarInout" class="form-control" style="height: 31px">
                        <option value="-1">==是否绑卡==</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
                <div class="form-group">
                    <select id="isDingYanInout" class="form-control" style="height: 31px">
                        <option value="-1">==是否订烟==</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
                <div class="form-group">
                    <select id="isPayInout" class="form-control" style="height: 31px">
                        <option value="-1">==是否支付==</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
                <div class="form-group">
                    <select id="isExpInout" class="form-control" style="height: 31px" title="此查询结果为：试点店铺授权的烟草客户信息">
                        <option value="-1">==是否试点==</option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>
                <div class="form-group">
                    <select id="syncStateInput" class="form-control" style="height: 31px">
                        <option value="-1">==同步状态==</option>
                        <option value="1">已同步</option>
                        <option value="0">未同步</option>
                    </select>
                </div>
                <%--<button type="button" @click="reloadOrder" class="btn btn-waring btn-sm">刷新</button>--%>
                <button type="button" @click="getOrder(0)" class="btn btn-success btn-sm">搜索</button>
            </form>

            <div class="row" v-for="order in orderList">
                <div class="col-sm-12" @click="">
                    <div class="r_list_wrap">
                        <ul class="list-group r_list_box">
                            <li class="list-group-item r_list r_list_font">专卖证号：{{order.custCode}}</li>
                            <li class="list-group-item r_list r_list_font">客户名称：{{order.custName}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">客户地址：{{order.custAddr}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">绑卡张数：{{order.bankCarCount}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">订单次数：{{order.orderCOunt}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">首次绑卡：{{order.firstBindCarTime}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">首次支付：{{order.firstPayOrderTime}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">注册时间：{{order.firstLoginTime}}</li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-sm-12" style="text-align: center; ">
                <span v-show="hasMoreData" @click="getOrder(1)"
                      style="border:1px solid #a6e2ff;padding: 7px;background-color: #6ec8ea;">点击加载更多数据</span>
                    <span v-show="!hasMoreData" onclick="javascript:layer.msg('没有更多数据了')"
                          style="border:1px solid rgb(202, 202, 202);padding: 7px;background-color: rgb(212, 212, 212);">我能给你的就这么多了</span>
                </div>
            </div>
        </div>
    </transition>
    <transition name="fade">
        <div class="row detail" v-show="!home">
            <button @click="returnHome" class="btn btn-default  btn-sm"><i class="fa fa-reply" aria-hidden="true"></i>
                返回
            </button>

            <div class="row" v-for="(payInfo, index) in payInfoList">
                <div class="col-sm-12">
                    <div class="r_list_wrap">
                        <ul class="list-group r_list_box">
                            <li class="list-group-item r_list r_list_font">流水号：{{payInfo.payOrderNo}}</li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">
                                商户名称：{{payInfo.merchantName}}
                            </li>
                            <li class="list-group-item r_list" style="color: green;">
                                支付全款：{{accDiv(payInfo.payAmount,100)}}
                            </li>
                            <li class="list-group-item r_list" v-bind:style="payStatusCodor(payInfo.payStatus)">
                                支付状态：{{formatPayStatus(payInfo.payStatus)}}
                            </li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">
                                银行回执：{{payInfo.bankRetMsg}}
                            </li>
                            <li class="list-group-item r_list" style="color: rgb(47, 19, 6);">
                                支付时间：{{payInfo.payDateStr}}
                            </li>
                        </ul>
                        <div class="btn_box" role="group" aria-label="...">
                            <button type="button" class="btn btn-sm btn-success box_radius"
                                    @click="selectPayResult(index)">查询交易
                            </button>
                            <button type="button" class="btn btn-sm btn-info box_radius"
                                    @click="showsendMessage(index)">订单通知
                            </button>
                            <button type="button" class="btn btn-sm btn-primary box_radius" @click="salesReturn">订单退货</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <!-- 通知的modal -->
    <div class="hide" id="sendMessageModal">
        <div style="margin-top: 24px; text-align: center;">
            <button class="btn  btn-lg btn-block sendMsgBtn" @click="isTZS = !isTZS"  v-bind:class="{'btn-success' : isTZS}">
                {{isTZS ? '通知成功' : '通知失败'}}
            </button>
        </div>
        <div style="margin-top: 20px; text-align: center;">
            <button class="btn btn-lg btn-block sendMsgBtn" @click="isTZC = !isTZC"  v-bind:class="{'btn-success' : isTZC}">
                {{isTZC ? '发送小云' : '不发小云'}}
            </button>
        </div>
        <div style="margin-top: 30px; text-align: center;">
            <button class="btn  btn-info btn-lg btn-block sendMsgBtn"
                    @click="sendCloudingMessageConfrim()">确定
            </button>
        </div>
    </div>
    <!-- /.modal -->
</div>

<script src="${contextPath}/static/system/js/common/vue.js"></script>
<script src="${contextPath}/static/layer/layer.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            orderId: '',
            custCode: '',
            orderList: [],
            page: 0,
            hasMoreData: true,
            home: true,
            payInfoList: [],
            getPayInfo: {
                custCode: '',
                userPhone: '',
                orderId: '',
            },
            selectPayInfo: {},

            closeLayerIndex: '',

            isTZS : true,
            isTZC : true,
        },
        computed: {},
        methods: {
            getOrder: function (flag) {
                layer.load()

                var vm = this
                if (flag) {
                    vm.page += 1;
                } else {
                    vm.page = 1;
                }


                var quXianName = $("#quXianNameInput").val();
                var quDaoName = $("#quDaoNameInput").val();
                var KeHuJingLiName = $("#KeHuJingLiNameInput").val();
                var channelName = $("#channelNameInput").val();
                var slsmanName = $("#slsmanNameInput").val();
                var cityType = $("#cityTypeInput").val();
                var syncState = $("#syncStateInput").val();
                var firstBindCarTime = $("#firstBindCarTimeInput").val();
                var firstPayOrderTime = $("#firstPayOrderTimeInput").val();
                var timeType = $("#timeTypeInput").val();
                var isBankCar = $("#isBankCarInout").val();
                var isPay = $("#isPayInout").val();
                var isDingYan = $("#isDingYanInout").val();
                var isExp = $("#isExpInout").val();
                //var parentDepartmentkey = $("#id_parentDepartmentkey_name").val();

                var filters = {
                    "rules": [{
                        "field": "channelName",
                        "data": channelName
                    }, {
                        "field": "slsmanName",
                        "data": slsmanName
                    }, {
                        "field": "syncState",
                        "data": syncState
                    }, {
                        "field": "quXianName",
                        "data": quXianName == undefined ? "" : quXianName
                    }, {
                        "field": "quDaoName",
                        "data": quDaoName == undefined ? "" : quDaoName
                    }, {
                        "field": "KeHuJingLiName",
                        "data": KeHuJingLiName == undefined ? "" : KeHuJingLiName
                    }, {
                        "field": "firstBindCarTime",
                        "data": firstBindCarTime,
                        "type": timeType,
                    }, {
                        "field": "firstPayOrderTime",
                        "data": firstPayOrderTime,
                        "type": timeType,
                    }, {
                        "field": "isBankCar",
                        "data": isBankCar
                    }, {
                        "field": "isPay",
                        "data": isPay
                    }, {
                        "field": "isDingYan",
                        "data": isDingYan
                    }, {
                        "field": "isExp",
                        "data": isExp
                    }, {
                        "field": "cityType",
                        "data": cityType
                    }]
                };

                $.ajax({
                    url: '${contextPath}/sys/clouderp/getCgtCustInfo',
                    type: 'post',
                    dataType: 'json',
                    data: {
                            page: vm.page,
                            rows: 10,
                            filters: JSON.stringify(filters),
                            sidx : 'orderDateStr',
                            sord : 'desc',

                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (window.console) {
                            console.log(data)
                        }
                        if (data.suceess == false) {
                            layer.msg("获取出错")
                            vm.page -= 1;
                            return
                        }
                        //  console.log(data)
                        var dataArray = data.recordList;

                        if (!dataArray.length) {
                            layer.msg("查询没有数据")
                        }
                        if (flag) {

                            vm.orderList = vm.orderList.concat(dataArray)
                        } else {
                            vm.orderList = dataArray
                        }

                        if (vm.page >= data.pageCount) {
                            vm.hasMoreData = false
                        } else {
                            vm.hasMoreData = true
                        }

                    },
                    error: function (error) {
                        vm.page -= 1;
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            reloadOrder : function () {
              this.orderId = '';
              this.custCode = '';
              this.page = 0;
              this.getOrder(1);
            },
            showOrderDetail: function (orderNo, custCode,mobile) {
                // layer.msg(orderNo)
                layer.load();
                var vm = this
                $.ajax({
                    url: '${contextPath}/sys/clouderp/getPayInfo?orderId=' + orderNo,
                    //async: false,
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            var result = data.data;
                            // console.log(result.length);
                            if (result.length == 0) {
                                layer.msg('该订单没有支付数据')
                                return;
                            }
                            vm.payInfoList = result;
                            vm.getPayInfo.orderId = orderNo
                            vm.getPayInfo.custCode = custCode
                             vm.getPayInfo.userPhone = mobile
                            vm.home = false

                        } else {
                            layer.msg(data.message)
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("服务器异常，稍后再试");
                    }

                })
            },
            returnHome: function () {
                this.home = true
            },
            payStatusCodor: function (status) {
                var color = '';
                switch (status) {
                    case "00" :
                        color = '#7B3F25';
                        break;
                    case "01" :
                        color = 'green';
                        break;
                    case "02" :
                        color = 'blue';
                        break;
                    case "99" :
                        color = 'red';
                        break;
                    default:
                        break;
                }
                return {
                    color: color
                }
            },
            formatOrderStatus: function (status) {
                switch (status) {
                    case "00" :
                        return "未支付";
                        break;
                    case "01" :
                        return "已支付";
                        break;
                    case "02" :
                        return "付款中";
                        break;
                    case "99" :
                        return "支付失败";
                        break;
                    default:
                        return "未知";
                        break;
                }
            },
            formatPayStatus: function (status) {
                switch (status) {
                    case "00" :
                        return "未支付";
                        break;
                    case "01" :
                        return "支付成功";
                        break;
                    case "02" :
                        return "付款中";
                        break;
                    case "99" :
                        return "支付失败";
                        break;
                    default:
                        return "未知";
                        break;
                }
            },
            selectPayResult: function (index) {
                var vm = this
                var payInfo = vm.payInfoList[index]
                layer.load();
                $.ajax({
                    url: '${contextPath}/sys/clouderp/getTransStatusInfo',
                    data: {
                        custCode: vm.getPayInfo.custCode,
                        merchantCode: payInfo.merchantCode,
                        payOrderNo: payInfo.payOrderNo,
                        transDateStr: payInfo.transDateStr
                    },
                    type: 'POST',
                    //async: false,
                    dataType: 'json',
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            var result = data.data
                            //result.respCode result.respMsg
                            var respCode = result.respCode == undefined ? "" : result.respCode;
                            var respMsg = result.respMsg == undefined ? "" : result.respMsg;
                            layer.open({
                                title: '交易信息',
                                closeBtn: 0,
                                shadeClose: true,
                                skin: 'yourclass',
                                content: '<div><strong>交易代码：</strong>' + respCode + '</div><div><strong>交易信息：</strong>' + respMsg + '</div>',
                            });
                        } else {
                            layer.msg(data.message);
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("服务器异常，稍后再试");
                    }
                })

            },
            showsendMessage: function (index) {
                var vm = this
                var payInfo = vm.payInfoList[index]
                vm.selectPayInfo = payInfo;
                $("#sendMessageModal").removeClass("hide")
                vm.closeLayerIndex = layer.open({
                    type: 1,
                    title: '订单通知',
                    closeBtn: 1,
                    shadeClose: true,
                    area: ['300px', '300px'],
                    skin: 'yourclass',
                    content: $("#sendMessageModal"),
                    end: function () {
                        $("#sendMessageModal").addClass("hide")
                    }
                });

            },
            sendCloudingMessageConfrim: function () {
                var vm = this
                var tradeFlag = vm.isTZS ? '1' : '0';
                var isSendCloudlingMsg = vm.isTZC ? '1' : '0';

                //alert(tradeFlag + "--" + isSendCloudlingMsg + "--" + app.custCode + "--" + app.orderId + "--" + app.userPhone + "--" + app.payInfo.payOrderNo + "--" + app.payInfo.payAmount);
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/sys/clouderp/notificationUser',
                    data: {
                        tradeFlag: tradeFlag,
                        isSendCloudlingMsg: isSendCloudlingMsg,
                        custCode: vm.getPayInfo.custCode,
                        orderId: vm.getPayInfo.orderId,
                        userPhone: vm.getPayInfo.userPhone,
                        payOrderNo: vm.selectPayInfo.payOrderNo,
                        orderAmount: vm.selectPayInfo.payAmount
                    },
                    type: 'POST',
                    // async: false,
                    dataType: 'json',
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {
                            layer.close(vm.closeLayerIndex)
                        }
                        layer.msg(data.message);

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("服务器异常，稍后再试");
                    }
                })

            },
            salesReturn : function () {
                layer.msg("暂未开通")
            },
            //除法
            accDiv: function (arg1, arg2) {
                var t1 = 0, t2 = 0, r1, r2;
                try {
                    t1 = arg1.toString().split(".")[1].length
                } catch (e) {
                }
                try {
                    t2 = arg2.toString().split(".")[1].length
                } catch (e) {
                }
                with (Math) {
                    r1 = Number(arg1.toString().replace(".", ""))
                    r2 = Number(arg2.toString().replace(".", ""))
                    return (r1 / r2) * pow(10, t2 - t1);
                }
            },

        }
    })
    app.getOrder(0);


    var selectEmpNameToSelected = function (channelName) {
        $.ajax({
            url: '${contextPath}/checking/selectEmpNameToSelected?channelName=' + channelName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#KeHuJingLiNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectEmpNameToSelected('')

    var selectChannelNameToSelected = function (quXianName) {
        $.ajax({
            url: '${contextPath}/checking/selectChannelNameToSelected?quXianName=' + quXianName,
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#quDaoNameInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            selectEmpNameToSelected(suggestion.value)
                        },
                        width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    }
    selectChannelNameToSelected('')

    $.ajax({
        url: '${contextPath}/checking/selectQuXianNameToSelected',
        success: function (data) {
            if (data.success) {
                var countries = data.data
                $('#quXianNameInput').autocomplete({
                    lookup: countries,
                    onSelect: function (suggestion) {
                        //alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        selectChannelNameToSelected(suggestion.value)
                    },
                    width: 200,
                    minChars: 0,
                });
            }
        }
    });

    selectCityTypeToSelected('${contextPath}','#cityTypeInput', null);

    $('#firstBindCarTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

    $('#firstPayOrderTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

</script>
